<template>
    <div>

        <el-card class="box-card">
            <div slot="header" class="clearfix rowSpaceBetweenAlignCenter">
                <span class="noselect">用户列表</span>
                <div class="rowStartAlignCenter">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="clickAddUser">新增</el-button>
                    <el-button type="primary" icon="el-icon-refresh" size="small" plain @click="rebuildList"></el-button>
                </div>
            </div>
            
            <div class="minHeight600px">
                <el-table ref="multipleTable" :data="users" tooltip-effect="dark" style="width: 100%;" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>

                    <el-table-column label="#" width="70">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>

                    <el-table-column prop="name" label="用户名" width="120"></el-table-column>

                    <el-table-column prop="noteCount" label="笔记数量" width="120"></el-table-column>

                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <span v-show="scope.row.status" class="colorGray">正常</span>
                            <span v-show="!scope.row.status" class="colorRed">已冻结</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" fixed="right" width="180">
                        <template slot-scope="scope">
                            <el-button type="primary" plain size="small" @click="$router.push({
                                path: '/user/modify',
                                query: { action: 'edit', id: scope.row.id, u: scope.row.name  }
                            })">修改</el-button>

                            <el-button type="primary" plain size="small" @click="clickDisableUsers(scope.row.id)" v-show="scope.row.status">冻结</el-button>
                            <el-button type="primary" plain size="small" @click="clickActiveUsers(scope.row.id)" v-show="!scope.row.status">解冻</el-button>
                            
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- <div style="margin-top: 20px">
                <el-button @click="clickMultiActive()">激活用户</el-button>
                <el-button @click="clickMultiDisable()">冻结用户</el-button>
            </div> -->

        </el-card>

       

        
    </div>
</template>



<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
import { apiListUsers, apiActiveUsers, apiDisableUsers } from '@/api/admin'
export default {
    data() {
        return {
            users: [],
            selectUs: []
        }
    },
    computed: {

    },
    methods: {
        // 切换选择
        toggleSelection(rows) {
            if (rows) {
                // 单行反选
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row)
                });
            } else {
                // 清空选择
                this.$refs.multipleTable.clearSelection()
            }
        },

        // 选择变化后的回调
        handleSelectionChange(val) {
            this.selectUs = val
        },

        // 新增用户
        clickAddUser () {
            this.fn.clog('新增用户')
            this.$router.push({
                path: '/user/modify',
                query: { action: 'add' }
            })
        },

        // 编辑用户
        clickEditUser (uid) {
            this.fn.clog('编辑用户')
            this.$router.push({
                path: '/user/modify',
                query: { action: 'edit', id: uid }
            })
        },

        // 激活用户
        clickActiveUsers (id) {
            this.fn.clog('激活用户')
            
            apiActiveUsers({id: id}).then(res=>{
                this.rebuildList()
            }).catch(e=>{
                this.fn.eWarning(JSON.stringify(e))
            })
        },

        // 冻结用户
        clickDisableUsers (id) {
            this.fn.clog('冻结用户')
            
            apiDisableUsers({id: id}).then(res=>{
                this.rebuildList()
            }).catch(e=>{
                this.fn.eWarning(JSON.stringify(e))
            })
        },

        // 重新加载列表
        async rebuildList () {
            this.users = []
            this.$nextTick(() => {
                apiListUsers().then(res => {
                    this.fn.clogJsons(res)
                    this.users = res.data
                }).catch(e => {
                    this.fn.eWarning
                })
            })
        },

    },
    mounted() {
        this.rebuildList()
    }
}
</script>